import { NavLink, Outlet, useSearchParams } from "react-router-dom";
import { getInvoices } from "../data";
export default function Invoices() {
    let invoices = getInvoices();
    let [searchParams, setSearchParams] = useSearchParams();
    return (
        <div style={{ display: "flex" }}>
            <nav
                style={{
                    borderRight: "solid 1px",
                    padding: "1rem"
                }}
            >
                <input
                    value={searchParams.get("filter") || ""}
                    onChange={(event) => {
                        let filter = event.target.value;
                        if (filter) {
                            setSearchParams({ filter });
                        } else {
                            setSearchParams({});
                        }
                    }}
                />

                {invoices
                    .filter((invoice) => {
                        const filter = searchParams.get("filter");
                        if (!filter) {
                            return true;
                        }
                        const name = invoice.name.toLowerCase();
                        return name.startsWith(filter.toLowerCase());
                    })
                    .map((item) => {
                        return (
                            <NavLink
                                style={({ isActive }) => {
                                    return {
                                        display: "block",
                                        margin: "1rem 0",
                                        color: isActive ? "red" : ""
                                    };
                                }}
                                to={`/invoices/${item.number}`}
                                key={item.number}
                            >
                                {item.name}
                            </NavLink>
                        )
                    })}
            </nav>
            <Outlet />
        </div >
    );
}
